<template>
  <div>
    <div id="monthChart" ref="lineChart" style="width:100%;height:27vh" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: [],
      data2: [],
    }
  },
  props: {
    sumDataDay: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  mounted() {
    this.initChart()
  },
  components: {},

  watch: {
    sumDataDay: {
      handler() {
        this.initChart()
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    initChart() {
      const data1 = this.sumDataDay.map((item) => {
        return item.num
      })
      const data2 = this.sumDataDay.map((item) => {
        return item.title
      })

      const myChart = this.$echarts.init(this.$refs.lineChart)
      const option = {
        title: {
          text: '当日品种入库数量呈现',
          top: 15,
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#fff',
            fontWeight: 'normal',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#fff',
              // formatter: function(val) {
              //   var strs = val.split('') //字符串数组
              //   var str = ''
              //   for (var i = 0, s; (s = strs[i++]); ) {
              //     //遍历字符串数组
              //     str += s
              //     if (!(i % 4)) str += '\n' //按需要求余
              //   }
              //   return str
              // },

              interval: 0,
              rotate: 40,
            },

            axisLine: {
              lineStyle: {
                color: '#05358b',
              },
            },
            data: data2,
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} ',
              color: '#aaa',
            },

            // 图表区域横向的线
            splitLine: {
              lineStyle: {
                color: '#05358b',
              },
            },
          },
        ],
        series: [
          {
            name: '故障数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              color: '#65cf94',
              fontSize: 15,
              fontWeight: 'bold',
            },
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              opacity: 0.8,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)',
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: data1,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
